@keyframes drop {
  0% {
    visibility: visible;
    width: 20%;
    height: 20%;
  }

  20% {
    visibility: visible;
    top: 100%;
    width: 100%;
    height: 100%;
  }

  100% {
    visibility: visible;
    top: 500%;
    width: 100%;
    height: 100%;
  }
}

.coins-rolling {
  width: 100%;
  height: 100%;

  .coin {
    visibility: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 20%;
    height: 20%;
    transform: translate(-50%, -50%);
    img{
      width:100%;
    }
  }

  &.collect {
    .coin {
      &.coin-1 {
        animation: drop .7s ease-in 0.7s 1;
      }

      &.coin-2 {
        animation: drop .7s ease-in 0.6s 1;
      }

      &.coin-3 {
        animation: drop .7s ease-in 0.5s 1;
      }

      &.coin-4 {
        animation: drop .65s ease-in 0.4s 1;
      }

      &.coin-5 {
        animation: drop .6s ease-in 0.3s 1;
      }

      &.coin-6 {
        animation: drop .55s ease-in 0.2s 1;
      }

      &.coin-7 {
        animation: drop .55s ease-in 0.1s 1;
      }

      &.coin-8 {
        animation: drop .55s ease-in 0.0s 1;
      }
    }
  }
}